<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="60%">
      <span slot="title" class="dialog-title">
        <p>{{ message.message }}</p>
        <el-button v-if="message.parentUserId" type="text" @click="handleShowInfo({id:message.parentUserId})">返回上级</el-button>

      </span>

      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="序号" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="昵称" align="center" prop="nickName" />
        <el-table-column label="手机号" align="center" prop="mobile" />
        <el-table-column label="用户编号	" align="center" prop="userNo" />
        <el-table-column label="持仓金额" align="center" prop="investAmount" />
        <el-table-column label="充值金额" align="center" prop="totalRecharge" />
        <el-table-column label="今日已到账利息" align="center" prop="todayInterest" />
        <!-- <el-table-column label="团队收益率" align="center" prop="userTeamRate" /> -->
        <!-- <el-table-column label="最后登录时间" align="center" prop="lastLoginTime" /> -->
        <!-- <el-table-column label="状态" align="center" prop="lastLoginTime">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.statusB"
            @change="setStatus(scope.row)"
          />
        </template>
      </el-table-column> -->
        <el-table-column label="操作" align="center" width="250">
          <template slot-scope="scope">
            <el-button v-if="scope.row.childrenCount>0" type="text" @click="handleShowInfo(scope.row)">{{ `查看下级(${scope.row.childrenCount}人)` }}</el-button>
            <el-button type="text" @click="handleHistory(scope.row)">流水记录</el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- <div class="pagination">
        <el-pagination
          :current-page.sync="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="fetchData"
          @current-change="fetchData"
        />
      </div> -->
    </el-dialog>
    <product ref="product" />
    <add ref="add" />

  </div>
</template>
<script>
import { getChildren } from '@/api/table'
import product from './product.vue'
import add from './add.vue'

export default {
  components: {
    product,
    add
  },
  data() {
    return {
      dialogVisible: false,
      listLoading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: ''
      },
      message: '',
      list: [],
      record: {}

    }
  },
  created() {

  },
  methods: {
    handleHistory(record) {
      this.$refs.add.show(record)
    },
    async show(record) {
      this.dialogVisible = true
      this.record = record
      this.fetchData()
    },
    async fetchData() {
      this.queryParams.userId = this.record.id
      const response = await getChildren(this.record.id)
      this.list = response.data
      console.log(JSON.parse(response.message))
      this.message = JSON.parse(response.message)
      this.listLoading = false
      // this.total = response.data.total
    },
    async handleShowInfo(e) {
      if (!e.id) {
        console.log(e.id, '没有上级')
        return false
      }
      const response = await getChildren(e.id)
      this.list = response.data
      this.message = JSON.parse(response.message)
      this.listLoading = false
    },
    setResionTxt(index) {
      let str = ''
      switch (index) {
        case 'withdrawal':
          str = '提现'
          break
        case 'recharge':
          str = '充值'
          break
        case 'transfer' :
          str = '转账'
          break
        case 'commission':
          str = '手续费'
          break
        case 'investEarnings':
          str = '收益'
          break
        case 'invest' :
          str = '理财'
          break
        case 'invest_earnings':
          str = '投资返利'
          break
        case 'receive_transfer' :
          str = '收到转账'
          break
      }
      return str
    },
    setStateTxt(index) {
      let str = ''
      switch (index) {
        case 'progressing':
          str = '进行中'
          break
        case 'end':
          str = '已结束'
          break
      }
      return str
    }

  }
}
</script>
<style scoped lang="scss">
.dialog-title{
 display: flex;
 align-items: center;
 position: relative;
 button{
  position: absolute;
  right: 100px;
 }
}
>>>.el-dialog__body{
 padding: 0 !important;
}
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.list {
  .item {
    border: 1px solid #c0ccda;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 10px;

    >div {
      display: flex;

      img {
        margin-right: 15px;
      }
    }

    >i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
